<template>
    <view class="container">
        <view class="box">
            <view class="title">付费升级 立得权限</view>
            <view class="pay">
                <view class="left">
                    <view class="up">黄金代理</view>
                    <view class="down">可获30%佣金</view>
                </view>
                <view class="center">
                    <view :class="State.user.agencyGrade?'up up-line':'up'">¥399/永久</view>
                    <view class="down">赠送永久素材会员</view></view>
                <view class="right">
                    <view class="btn" v-if="State.user.agencyGrade">已获得</view>
                    <view class="btn btn2" @click="pay()" v-else>去升级</view>
                </view>
            </view>
        </view>

        <view class="box">
            <view class="title">升级代理 开启收益</view>
            <view class="item">
                <view class="left">
                    <uni-icons type="medal" size="30" color="#333"></uni-icons>
                </view>
                <view class="right">
                    <view class="tit">免费升级</view>
                    <view class="summary">邀请好友达一定数量后自动开通代理权限。</view>
                    <view class="ul">
                        <view class="li">
							<view class="l">•</view>
							<view class="r">1年黄金代理：邀请5个有效用户，可享30%佣金；</view>
						</view>
                        <view class="li">
                        	<view class="l">•</view>
                        	<view class="r">1年钻石代理：邀请10个有效用户，可享50%佣金；</view>
						</view>
                        <view class="li">
                        	<view class="l">•</view>
                        	<view class="r">有效用户是指首次登录并使用素材小程序的新用户</view>
						</view>
                    </view>
					<view class="summary">（注：免费升级代理，将不会赠送素材会员）</view>
                </view>
            </view>
            <view class="item">
                <view class="left">
                    <uni-icons type="staff" size="30" color="#333"></uni-icons>
                </view>
                <view class="right">
                    <view class="tit">如何邀请用户</view>
                    <view class="summary">直接转发分享本小程序。</view>
                    <view class="ul">
                        <view class="li">
                        	<view class="l">•</view>
                        	<view class="r">分享带有专属二维码的推广海报。</view>
						</view>
                        <view class="li">
                        	<view class="l">•</view>
                        	<view class="r">邀请新用户即可永久绑定邀请关系。</view>
						</view>
                    </view>
                    <view class="progress-box">
                        <view class="l">
                            <view class="num">已邀请<text>{{ teamData.vipNum }}</text>人/10人</view>
                            <view class="progress">
                                <view class="progress-num" :style="{'width':340/10*teamData.vipNum+'rpx'}"></view>
                            </view>
                        </view>
                        <view class="r">
							<button open-type="share" class="btn">
								去分享
							</button>
                        </view>
                    </view>
                </view>
            </view>
            <view class="item">
                <view class="left">
                    <uni-icons type="wallet" size="30" color="#333"></uni-icons>
                </view>
                <view class="right">
                    <view class="tit">如何获得收益</view>
                    <view class="summary">通过上面两种方式首次进入小程序的用户，完成注册后，将终生绑定到代理名下，用户有开通素材会员、付费升级代理等行为，代理就会获得相应奖励。</view>
                </view>
            </view>

<!--            <view class="uni-btn" style="margin-top:20px;">点击查看奖励机制</view>-->
        </view>

        <view class="box">
            <view class="title">联系客服 咨询详情</view>
            <view class="qrcode">
                <image :src="dict.config.wxPrivateQrcode" :show-menu-by-longpress="true" class="img" mode="aspectFill"></image>
                <view class="word">长按二维码添加微信</view>
            </view>
        </view>
    </view>
</template>

<script>
import { IndexApi } from '@/api/IndexApi'
import { DictApi } from '@/api/DictApi'
import { UserApi } from '@/api/user/UserApi'
import { WxMiniShareData } from '@/utils/share/WxMiniShareData'

export default {
    data() {
        return {
			Config: this.$Config,
			Common: this.$Common,
			Auth: this.$Auth,
			ShareUtil: this.$ShareUtil,
			State: this.$store.state,
			Dict: this.$Dict,

            dict: {config:{wxPrivateQrcode:''}},
            teamData:{
                inviteNum:0,
                vipNum:0,
                vipMoney:0.00,
                teamNum:0,
            },
			payIng:false
        }
    },
    onLoad() {
        DictApi.getDict().then((response) => {
            this.dict = response
        })
        UserApi.statisticsTeamData().then((response) => {
            this.teamData = response
        })
    },
	onShareAppMessage(res) {
		return WxMiniShareData
	},
    methods: {
        pay() {
			let that = this
			if(that.payIng) return false
			that.payIng = true
			
            let setMeal =that.dict.enums.setMeal.filter(item=>item.code===5)

            let param = {
                bizType: 1,
                bizOrderNo: setMeal[0].code,
                payType: 1,
                description: "购买会员",
                amount: setMeal[0].money
            }
            IndexApi.pay(param).then((response) => {
            	uni.requestPayment({
            	    provider: 'wxpay',
            		timeStamp: response.timeStamp,
            		nonceStr: response.nonceStr,
            		package: response.packageVal,
            		signType: response.signType,
            		paySign: response.paySign,
            		success: function (res) {
						that.payIng = false
            			that.$store.dispatch('user/getInfo')
            			that.Common.navigateBackRefresh().statisticsTeamData()
            		},
            		fail: function (err) {
						that.payIng = false
            		}
            	});
            })
        }
    }
}
</script>

<style lang="scss" scoped>

.container{padding:0px 15px 15px 15px;}
.box{padding:30px 20px; margin-top:15px; background: #FFF; border-radius:10px;}
.box .title{ background: url("../../../static/image/tit_bg.png") center no-repeat;
        text-align: center; background-size: 100%; font-weight: bold; }
.box .pay{ display: flex; justify-content: space-between; margin-top:30px; align-items: center;}
.box .pay .left .down{ color:#999; font-size: 14px; margin-top:10px;}
.box .pay .center .up{ color:#E9718E; font-weight: bold;}
.box .pay .center .up-line{ text-decoration: line-through;}
.box .pay .center .down{ color:#999; font-size: 14px; margin-top:10px;}
.box .pay .right .btn{ color:#FFF; background: #C8C8C8; padding:5px 10px; border-radius: 20px;
        font-size: 14px;}
.box .pay .right .btn2{ background: $uni-global-color;}
.box .item{ margin-top:20px; display: flex;}
.box .item .left{ padding-right:8px; }
.box .item .right{ flex: 1;}
.box .item .right .tit{ font-size: 16px; line-height: 30px; font-weight: bold; }
.box .item .right .summary{ font-size: 14px; line-height: 24px; color:#999; margin-top:10px; }
.box .item .right .ul{ }
.box .item .right .ul .li{  margin-top:10px;display: flex;}
.box .item .right .ul .li .l{width:15px;font-size: 14px; color:#999;line-height: 24px;}
.box .item .right .ul .li .r{flex:1;font-size: 14px; color:#999;line-height: 24px;}

.box .item .right .progress-box{ display: flex;justify-content: space-between; align-items: center; margin-top:20px;}
.box .item .right .progress-box .l{ flex: 1;}
.box .item .right .progress-box .l .num{ font-size: 14px; color:#666;}
.box .item .right .progress-box .l .progress{ width:340rpx; background:#EAECEB; height:8px; border-radius: 5px; margin-top:5px; }
.box .item .right .progress-box .l .progress .progress-num{ background:$uni-global-color; height:8px; border-radius: 5px 0 0 5px; width:40px; }
.box .item .right .progress-box .r{ padding-left:9px; }
.box .item .right .progress-box .r .btn{ color:#FFF; background: $uni-global-color; padding:5px 10px; border-radius: 20px;
    font-size: 14px;  line-height: 20px;}

.box .qrcode{ text-align: center; margin-top:30px;}
.box .qrcode .img{ width:120px; height:120px;}
.box .qrcode .word{ margin-top:20px; color:#999;}


</style>
